import { useContext } from "react";
import GanttContext from "../../../gantt/context";
import VirtualList from "../../components/virtual-list";
import { GanttConsts } from "../../constants";
import TaskItem from "./task-item";

export default function Task() {
  const { flattenedTasks } = useContext(GanttContext);

  return (
    <>
      <div className="flex bg-orange-400 text-white shadow-lg z-10">
        <div className="flex-1 flex items-center pl-2 font-medium" style={{ height: `${GanttConsts.HEAD_HEIGHT}px` }}>Name</div>
        <div className="w-28 flex items-center font-medium" style={{ height: `${GanttConsts.HEAD_HEIGHT}px` }}>Start</div>
        <div className="w-28 flex items-center font-medium" style={{ height: `${GanttConsts.HEAD_HEIGHT}px` }}>End</div>
        <div className="w-20 flex items-center justify-center font-medium" style={{ height: `${GanttConsts.HEAD_HEIGHT}px` }}>Progress</div>
      </div>
      <VirtualList
        items={flattenedTasks}
        Comp={TaskItem}
      />
    </>
  );
}
